<template>
  <!-- 附表2：2021年度中央企业内部审计发现重大问题汇总表 -->
  <j-modal
    :title="'报表上报'"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button key="back" style="padding-left: 8px; padding-right: 8px" @click="close(false)"> 关闭 </a-button>
      <a-popconfirm :disabled="disableSubmit" title="确定保存吗?" @confirm="() => saveOrSubmit('save', null)">
        <a-button key="save" style="padding-left: 8px; padding-right: 8px; margin-left: 8px" :disabled="disableSubmit">
          保存
        </a-button>
      </a-popconfirm>
      <a-button
        key="submit"
        type="primary"
        style="padding-left: 8px; padding-right: 8px; margin-left: 8px"
        :disabled="disableSubmit"
        @click="close(true)"
      >
        提交审批
      </a-button>
    </template>
    <a-spin :spinning="Loading">
      <div :class="{ isCheck: isCheck }">
        <!-- <div class="table-header">
          <span class="table-title">填报单位：</span>{{ model.departName }} <span class="table-title">审计负责人：</span
          >{{ model.auditPersonName }} <span class="table-title">填表人：</span>{{ model.createByText }}
          <span class="table-title">填表时间：</span>{{ model.createTime }} <span class="table-title">统计时间：</span
          >{{ model.year }}年（{{ model.quarter }}季度）
        </div> -->
        <a-table
          class="edit-list"
          ref="table"
          size="middle"
          bordered
           rowKey="id"
          width="100vw"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
          :scroll="{ x: 2200 }"
        >
          <!-- 表头 -->
          <div slot="title">
            <div class="title">{{ title }}</div>
            <div class="sub-title">
              <div>填报单位：{{ model.departName }}</div>
              <div>{{ model.year }}年（{{ model.quarter }}季）度</div>
              <div>审计负责人：<a-input style="display: inline-block;width: 100px" v-model="headerName"></a-input></div>
              <div>填表人：{{ model.createByText }}</div>
              <div>填表时间：{{ model.createTime }}</div>
              <div>金额单位（万元）</div>
              <div v-if="!disableSubmit">
                <a-button :disabled="disableSubmit" @click="addTableList" size="small" type="primary" icon="plus">
                  新增
                </a-button>
              </div>
            </div>
          </div>
          <template v-slot:IssueType="text, record">
            <span>
              <span class="redstar">*</span>
              <a-select
                :disabled="disableSubmit"
                class="is-disable-style"
                :show-search="true"
                :not-found-content="null"
                :filter-option="true"
                v-model="record.wtlx"
                placeholder="问题类型"
                style="width: calc(100% - 10px)"
                @search="
                  (value) => {
                    record.wtlx = value != null && value != '' ? value : undefined
                  }
                "
                @blur="
                  (value) => {
                    record.wtlx = value
                  }
                "
                @change="
                  (value, options) => {
                    record.wtlx = value != null && value != '' ? value : undefined
                  }
                "
              >
                <template v-for="(item, index) in dictOptions">
                  <a-select-option :value="item.value" :label="item.title" :key="index">
                    {{ item.text }}
                  </a-select-option>
                </template>
              </a-select>
            </span>
          </template>
          <template v-slot:ConcrateIssue="text, record">
            <span style="display: flex;align-items: center;">
              <span class="redstar">*</span>
              <a-textarea
                :disabled="disableSubmit"
                class="is-disable-style"
                v-model="record.jtwt"
                style="width: calc(100% - 10px)"
                placeholder="请输入具体问题（典型案例）"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </span>
          </template>
          <template v-slot:Isillegal="text, record">
            <span>
              <span class="redstar">*</span>
              <j-dict-select-tag
                class="is-disable-style"
                v-model="record.sfwg"
                :disabled="disableSubmit"
                style="width: calc(100% - 10px)"
                placeholder="是否违规"
                dict-code="sys_yes_or_no"
              />
            </span>
          </template>
          <template v-slot:departName="text">
            <div style="width: 100%; height: 45px; overflow-x: hidden; overflow-y: auto">{{ text }}</div>
          </template>
          <template v-for="(col, index) in colrender" v-slot:[col]="text, record">
            <a-input-number v-if="!disableSubmit" v-model="record[col]" :key="index" :min="0" />
            <span v-else :key="index">{{ record[col] }}</span>
          </template>
          <template v-slot:action="text, record, index">
            <a @click="handleDelList(index)">删除</a>
          </template>
        </a-table>
      </div>
    </a-spin>
    <SelectApprove ref="approver" @submitData="saveOrSubmit"></SelectApprove>
    <AssistDrawer />
  </j-modal>
</template>

<script>
import SelectApprove from '../SelectApprover'
import { httpAction, deleteAction, getAction, postAction } from '@/api/manage'
import columns from './columns11'
import AssistDrawer from '../../../../component/AssistDrawerM11.vue'
import { BbsbModelMixin1 } from './BbsbModelMixin1'
export default {
  name: 'ModelView11',
  mixins: [BbsbModelMixin1],
  components: {
    SelectApprove,
    AssistDrawer,
  },
  data() {
    return {
      headerName:'',
      columns: [],
      model: {},
      btnStyle: 'save',
      approveId: '',
      type: '9',
      sjType: '9',
      state: 1,
      colrender: ['wtzs', 'sjje', 'wszd', 'whss', 'zzwz'],
      url: {
        //保存或编辑
        list: '/sjxxzhbb/gzwbb/queryNbsjfxwthzInfoById',
        save: '/sjxxzhbb/gzwbb/saveNbsjfxwthzInfo',
        submitdata: '/common/sjProcCommon/nbsjfxwthzShen',
        delete: '/sjxxzhbb/sjAuditInfo/remove',
      },
      dictOptions: [],
      flag: true,
    }
  },
  filters: {
    typeTransfer(val) {
      console.log(typeof val)
    },
  },
  methods: {
    add(record) {
      this.model = Object.assign({}, record)
      this.columns = columns()
      this.visible = true
      this.setReportTitle()
      this.model.fileId = ''
      this.dataSource = [
        {
          xu: this.dataSource.length + 1,
          departName: this.model.departName,
          wtlx: '',
          jtwt: '',
          sfwg: '',
          wtzs: 0,
          sjje: 0,
          wszd: 0,
          whss: 0,
          zzwz: 0,
        },
      ]
      this.getdictData()
    },
    handleDelList(index) {
      if (this.dataSource.length > 1) {
        this.dataSource.splice(index, 1)
      } else {
        this.$message.warning('至少存在一条数据')
      }
    },
    check(record) {
      this.Loading = true
      this.model = Object.assign({}, record)
      this.columns = columns().slice(0, columns().length - 1)
      this.visible = true
      this.getTableData()
      this.getdictData()
    },
    // check(record) {
    //   this.Loading = true
    //   let col = columns()
    //   this.columns = col.slice(0, col.length - 2)
    //   this.model = Object.assign({}, record)
    //   this.visible = true
    //   this.getTableData()
    // },
    edit(record) {
      this.Loading = true
      this.columns = columns()
      this.model = Object.assign({}, record)
      setTimeout(() => {
        this.getTableData()
      }, 2000)
      this.getdictData()
      this.visible = true
    },
    saveOrSubmit(style, approveId) {
      this.btnStyle = style
      this.approveId = approveId
      // 提交并审批
      this.flag = true
      this.dataSource.map((element, index) => {
        if (!(element.wtlx && element.jtwt && element.sfwg)) {
          if (this.flag) this.flag = false
          this.$message.warning(`第${index + 1}行有必填项未写`)
        }
      })
      if (this.flag) this.saveData()
    },
    saveData() {
      this.Loading = true
      let param = {
        id: this.model.id,
        year: this.model.year,
        sjType: this.sjType,
        quarter: this.model.quarter,
        info: JSON.stringify(this.dataSource),
        head: this.headerName,
      }
      postAction(this.url.save, param).then((res) => {
        this.Loading = false
        if (res.success) {
          if (!this.model.id) {
            this.model.id = res.result
          }
          if (this.btnStyle == 'save') {
            this.$message.success(res.message)
            this.visible = false
            this.$emit('ok')
            return
          } else {
            this.submitData(this.approveId)
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getTableData() {
      this.Loading = true
      getAction(this.url.list, { id: this.model.id }).then((res) => {
        if (res.success && res.result.length > 0) {
          this.dataSource = res.result[0].infoEntity
          this.model.createTime = res.result[0].createTime
          this.model.createByText = res.result[0].createByText
          this.model.createBy = res.result[0].createBy
          this.model.departName = res.result[0].departName
          this.headerName = res.result[0].headName
          this.model.year = res.result[0].year
          this.model.quarter = res.result[0].quarter
          this.model.fileId = res.result[0].fileId
        } else {
          this.$message.error(res.messgae)
        }
        this.Loading = false
      })
    },
    // 新增数据
    addTableList() {
      let num = 1
      this.dataSource.forEach((item, index) => {
        if (item.xu != '合计') {
          item.xu = num++
        }
      })
      this.dataSource.splice(this.dataSource.length, 0, {
        xu: this.dataSource.length + 1,
        departName: this.model.departName,
        wtlx: '',
        jtwt: '',
        sfwg: '',
        wtzs: 0,
        sjje: 0,
        wszd: 0,
        whss: 0,
        zzwz: 0,
      })
    },
    // 提交数据
    submitData(userId) {
      let params = {
        proId: this.model.id,
        userIds: userId,
        type: this.type,
        state: this.state,
        sjType: this.sjType,
      }
      getAction(this.url.submitdata, params).then((res) => {
        this.Loading = false
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
          this.$refs.approver.confirmLoading = false
          this.$emit('ok')
        } else {
          console.log(res)
        }
      })
    },
    delete(record) {
      deleteAction(this.url.delete, { id: record.id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getdictData() {
      getAction(`/sys/dict/getDictItems/report_nbsjfxwthz`).then((res) => {
        if (res.success) {
          this.dictOptions = res.result
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../../css/checkAndEdit.less';
.input-title {
  height: 30px !important;
}
.table-header {
  margin-bottom: 10px;
  position: relative;
  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
.redstar {
  color: red;
  font-size: 24px;
  vertical-align: middle;
}
.edit-list {
  .is-disable-style {
    /deep/ .ant-select-selection {
      border: 0px;
      background: #fff;
      color: rgba(0, 0, 0, 0.65) !important;
    }
    &.ant-input-disabled {
      background: #fff;
      color: rgba(0, 0, 0, 0.65) !important;
    }
  }
  /deep/ .ant-table-thead {
    tr {
      th {
        text-align: center !important;
        color: #909399;
        font-size: 14px;
        font-weight: 700;
        // padding: 0px !important;
        // line-height: 35px;
        // height: 35px;
      }
    }
  }
  /deep/.ant-table-title {
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    border-left: 0px;
    border-right: 0px;

    // border-width: 2px;
    .title {
      color: #666;
      font-weight: 600;
      text-align: center;
      font-size: 20px;
    }

    .sub-title {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      div {
        margin-right: 26px;
        font-size: 14px;
      }
    }
  }
}
</style>